<template>
  <div class="game-content">
    <com-header></com-header>
    <com-pro class="por-posi"></com-pro>
    <div class="comparebox">
      <div class="compare">
        <div
          v-for="item,index in configData"
          :key="index"
          :class="{
              active: selected === item.code,
              isacitve: selected !== item.code,
            }"
          @click="checkSelected(item)"
        >
          <span>{{item.name}}{{ item.odds }}</span>
          <span v-if="item.credit !== undefined && item.credit !== null">{{ item.credit }}</span>
          <span v-else>0</span>
        </div>
      </div>
    </div>
    <div class="ballbox">
      <div v-for="(item, index) in imgData" :key="index">
        <img
          class="ballsize"
          :class="{ activeballsty : activeball  === index}"
          :src="item.src"
          @click="handleBall(index)"
        />
      </div>
    </div>
    <div class="centerbox">
      <com-money class="money-posi"></com-money>
      <com-btn class="btn-posi"></com-btn>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { btnwidth } from "@/utils/width";
import ComMoney from "./Com/ComMoney.vue";
import ComHeader from "./Com/ComHeader.vue";
import ComPro from "./Com/ComPro.vue";
import ComBtn from "./Com/ComBtn.vue";
export default {
  name: "GameGyjj",
  //游戏冠亚季军
  props: {},
  components: {
    ComMoney,
    ComHeader,
    ComPro,
    ComBtn
  },
  data() {
    return {
      imgData: [
        { src: require("@/assets/images/payOrder/a1.png") },
        { src: require("@/assets/images/payOrder/a2.png") },
        { src: require("@/assets/images/payOrder/a3.png") },
        { src: require("@/assets/images/payOrder/a4.png") },
        { src: require("@/assets/images/payOrder/a5.png") },
        { src: require("@/assets/images/payOrder/a6.png") },
        { src: require("@/assets/images/payOrder/a7.png") },
        { src: require("@/assets/images/payOrder/a8.png") },
        { src: require("@/assets/images/payOrder/a9.png") },
        { src: require("@/assets/images/payOrder/a10.png") }
      ],
      selected: "",
      selectedsize: "",
      activeball: -1,
      gameType: "",
      //这里时游戏配置冠亚季的状态配置
      configData: "",
      top1Array: "",
      top2Array: "",
      top3Array: "",
      //每次有人下注就把这个数据保存到这个数组里面
      configValues: []
      //单：even，双：odd，大：big，小：small，选球就是：ball
    };
  },
  computed: {
    ...mapState("handlegame", [
      "isInit",
      "gameInfo",
      "gameName",
      "conFigparam"
    ]),
    ...mapState("websock", ["gameState"])
  },
  created() {
    var ruleData = this.gameInfo.gameRoomConfig.ruleList;
    var categoryMap = {};
    //把规则都跳出来
    for (let i = 0; i < ruleData.length; i++) {
      let rule = ruleData[i];
      let match = rule.id.match(/^(TOP\d)_(DAN|SHUANG|DA|XIAO)$/);
      if (match) {
        let category = match[1];
        if (!categoryMap[category]) {
          categoryMap[category] = [];
        }
        categoryMap[category].push(rule);
      }
    }
    // 现在 categoryMap 包含了每个 TOP 类别对应的数组
    var top1Array = categoryMap["TOP1"] || [];
    var top2Array = categoryMap["TOP2"] || [];
    var top3Array = categoryMap["TOP3"] || [];
    for (let i = 0; i < top1Array.length; i++) {
      let rule = top1Array[i];
      // 根据 rule.id 进行不同的修改
      if (rule.id === "TOP1_DAN") {
        rule.name = this.$t("dan");
        rule.code = "even";
      }
      if (rule.id === "TOP1_SHUANG") {
        rule.name = this.$t("shuang");
        rule.code = "odd";
      }
      if (rule.id === "TOP1_DA") {
        rule.name = this.$t("da");
        rule.code = "big";
      }
      if (rule.id === "TOP1_XIAO") {
        rule.name = this.$t("xiao");
        rule.code = "small";
      }
    }
    for (let i = 0; i < top2Array.length; i++) {
      let rule = top2Array[i];
      // 根据 rule.id 进行不同的修改
      if (rule.id === "TOP2_DAN") {
        rule.name = this.$t("dan");
        rule.code = "even";
      }
      if (rule.id === "TOP2_SHUANG") {
        rule.name = this.$t("shuang");
        rule.code = "odd";
      }
      if (rule.id === "TOP2_DA") {
        rule.name = this.$t("da");
        rule.code = "big";
      }
      if (rule.id === "TOP2_XIAO") {
        rule.name = this.$t("xiao");
        rule.code = "small";
      }
    }
    for (let i = 0; i < top3Array.length; i++) {
      let rule = top3Array[i];
      // 根据 rule.id 进行不同的修改
      if (rule.id === "TOP3_DAN") {
        rule.name = this.$t("dan");
        rule.code = "even";
      }
      if (rule.id === "TOP3_SHUANG") {
        rule.name = this.$t("shuang");
        rule.code = "odd";
      }
      if (rule.id === "TOP3_DA") {
        rule.name = this.$t("da");
        rule.code = "big";
      }
      if (rule.id === "TOP3_XIAO") {
        rule.name = this.$t("xiao");
        rule.code = "small";
      }
    }
    // 分别给每一个数组排序
    const sortByCode = array => {
      return array.sort((a, b) => {
        const order = { even: 1, odd: 2, big: 3, small: 4 };
        return order[a.code] - order[b.code];
      });
    };
    top1Array = sortByCode(top1Array);
    top2Array = sortByCode(top2Array);
    top3Array = sortByCode(top3Array);
    this.top1Array = top1Array;
    this.top2Array = top2Array;
    this.top3Array = top3Array;
    if (this.gameName === "gyjj_gj") {
      this.configData = this.top1Array;
    }
    if (this.gameName === "gyjj_yj") {
      this.configData = this.top2Array;
    }
    if (this.gameName === "gyjj_jj") {
      this.configData = this.top3Array;
    }
    console.log(this.configData);
  },
  watch: {
    conFigparam(newVal) {
      const allArrays = [
        ...this.top1Array,
        ...this.top2Array,
        ...this.top3Array
      ];
      // 在整合后的数组中检查是否存在相同的ruleId
      const matchingRule = allArrays.find(rule => rule.id === newVal.ruleId);
      if (matchingRule) {
        // 如果找到相同的ruleId，将credit添加到对应规则对象的credit属性中
        matchingRule.credit = (matchingRule.credit || 0) + newVal.credit;
      }
    },
    //游戏开始的时候把里面的这个参数重置掉
    gameState(newValue, oldValue) {
      if (newValue !== oldValue) {
        if (newValue === "startBet") {
          const allArrays = [
            ...this.top1Array,
            ...this.top2Array,
            ...this.top3Array
          ];
          allArrays.forEach(item => {
            if (item.credit !== undefined && item.credit !== null) {
              item.credit = 0;
            }
          });
        }
      }
    },
    gameName(newValue) {
      if (newValue === "gyjj_gj") {
        this.configData = this.top1Array;
      }
      if (newValue === "gyjj_yj") {
        this.configData = this.top2Array;
      }
      if (newValue === "gyjj_jj") {
        this.configData = this.top3Array;
      }
    },
    isInit: {
      handler(newVal) {
        if (newVal) {
          this.init();
          this.$store.commit("handlegame/INTE_PAGE_STATE", false);
        }
      },
      deep: true
    }
  },
  methods: {
    init() {
      (this.selected = ""),
        (this.selectedsize = ""),
        (this.activeball = -1),
        (this.gameType = "");
    },
    widthBall() {
      return btnwidth(28);
    },
    //选择球
    handleBall(value) {
      this.activeball = value;
      //如果选择球就清空其他的俩个选择类目以下同理
      this.selected = "";
      this.selectedsize = "";
      this.gameType = "ball";
      this.setGameType(this.gameType);
      this.$store.dispatch("handlegame/setGameNuber", value);
    },
    checkSelected(e) {
      // 点击时根据传入的值来设置 selected 变量
      this.selected = e.code;
      (this.activeball = -1), (this.selectedsize = "");
      this.gameType = e.code;
      this.setGameType(this.gameType);
    },
    setGameType(value) {
      this.$store.dispatch("handlegame/setGameType", value);
    }
  }
};
</script>
<style lang="less" scoped>
.game-content {
  width: 100%;
  padding: 0 16px;
  box-sizing: border-box;
}
.por-posi {
  margin-top: 20px;
}
.comparebox {
  display: flex;
  justify-content: space-between;
  margin-top: 18px;
  .compare {
    width: 100%;
    height: 42px;
    text-align: center;
    display: flex;
    justify-content: space-between;
    div {
      width: 78px;
      height: 100%;
      display: flex;
      flex-direction: column;
      border-radius: 4px 4px 4px 4px;
      font-size: 14px;
      align-items: center;
      justify-content: center;
      border: 1px solid #767676;
    }
  }
}
.active {
  background: #ededed;
  font-weight: 500;
  color: #000000;
}
.isacitve {
  background: #404040;
  font-weight: 500;
  color: #ffffff;
}
.ball-select::-webkit-scrollbar {
  display: none; /* Webkit 兼容性：隐藏滚动条 */
}
.ballsize {
  width: 28px;
  height: 28px;
  margin-right: 3px;
}
.activeballsty {
  border: 1px solid #ffffff;
  border-radius: 16px;
}
.ballbox {
  margin-top: 14px;
  display: flex;
  justify-content: space-between;
}
.centerbox {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .money-posi {
    margin-top: 14px;
  }
  .btn-posi {
    margin-top: 19px;
  }
}
</style>
  